/**
 * @huanhuan
 * 转让列表
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    FlatList
} from 'react-native'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, consoleLog } from '../../utils/utilsToast'
import ActivityIndicatorItem from '../../components/common/ActivityIndicatorItem'

import FooterComponent from '../../components/common/footerComponent'
import EmptyComponent from '../../components/common/emptyComponent'
export default class Assignment extends Component {

    constructor(props) {
        super(props);
        this.state =  {
            ready: false,
            showFoot: 0,
            error: false,
            errorInfo: "",
            loadMore: false,
            refreshing: false,
            companyListData: [],
            
            sort: false, // 排序（显示）
            filter: false, // 筛选（显示）
            sortType: 1, // 排序方式： 1收益基准最高 2最新上线 3打款时间最短 4认购人数最多 5剩余时间最多 6产品期限最短
            FundType: 0, // 基金类型： 0不限，1股权型，2债券型，3股票型，4货币型，5理财型，6定开理财型，7混合型，8指数型 
            RiskType: 0, // 风险等级： 0不限，1高，2中高，3中，4中低，5低
            trueFundType: 0,
            trueRiskType: 0,
            rateStart: '',
            rateEnd: '',
            trueRateStart: '',
            trueRateEnd: '',
        }
        // this.netRequest = new NetRequest();
    }

    /**
     * 初始化状态
     * @type {Boolean}
     */
    page = 0;
    totalPage = 1;
    loadMore = false;
    refreshing = false;

    async componentDidMount(){
        await this.dropLoadMore();
        setTimeout(() => {
            this.updateState({
                ready: true,
                // showFoot: 0 // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
            })
        },0)
    }

    onBack = () => {
        this.props.navigation.goBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = (page) => {
        let { sortType, trueFundType, trueRiskType, trueRateStart, trueRateEnd } = this.state;
        let url = ServicesApi.transfer_index //ServicesApi.get_list
        let data = {
            page: page,
            order_type: sortType,
            fund_type: trueFundType,
            risk_level: trueRiskType,
            rate_start: trueRateStart,
            rate_end: trueRateEnd,
        };
        return Services.post(url, data)
            .then( result => {
                this.updateState({
                    companyListData: result.data.list,
                })
            })
            .catch( error => {})
    }

    dropLoadMore = async () => {
        this.loadNetData();
    }

    freshNetData = async () => {
        this.loadNetData();
    }

    renderCompanyItem = ({item}) => {
        return (
            <TouchableOpacity style={[styles.item]} onPress={() => this.onPushNavigator('AssignmentDetatil', item)}>
                <Text style={styles.itemTitle}>{item.fund_order_info.fund_id_name}</Text>
                <View style={styles.itemLine}>
                    <Text style={styles.itemLineLeft}>业绩比较基准</Text>
                    <Text style={styles.itemLineRight}>{item.datum_rate}</Text>
                </View>
                <View style={styles.itemLine}>
                    <Text style={styles.itemLineLeft}>产品期限</Text>
                    <Text style={styles.itemLineRight}>{item.fund_order_info.time_limit}</Text>
                </View>
                <View style={styles.itemLine}>
                    <Text style={styles.itemLineLeft}>委托时间</Text>
                    <Text style={styles.itemLineRight}>{item.fund_order_info.confirm_day}</Text>
                </View>
                <View style={styles.itemLine}>
                    <Text style={styles.itemLineLeft}>转让份额</Text>
                    <Text style={styles.itemLineRight}>{item.money}</Text>
                </View>
                <View style={styles.itemLine}>
                    <Text style={styles.itemLineLeft}>转让单价</Text>
                    <Text style={styles.itemLineRight}>{item.price}元</Text>
                </View>
                <View style={styles.itemLine}>
                    <Text style={styles.itemLineLeft}>附带受益（截至今日）</Text>
                    <Text style={styles.itemLineRight}>{item.fund_order_info.income_amount}</Text>
                </View>
                <View style={styles.itemLine}>
                    <Text style={styles.itemLineLeft}>转让总价</Text>
                    <Text style={styles.itemLineRight}>{item.amount}</Text>
                </View>
                <View style={styles.itemBtn}>
                    <Text style={styles.itemBtnText}>{item.is_many_name}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    renderHeaderView = () => {
        return <View style={styles.shopListViewTitle}/>
    }

    renderFooterView = () => {
        return <FooterComponent status = {this.state.showFoot} />;
    }
    
    renderEmptyView = () => {
        return this.state.showFoot == 0 && <EmptyComponent emptyTips = {'暂无数据！'} />;
    }

    renderSeparator = () => {
        return <View style={GlobalStyles.horLine} />;
    }

    onPushNavigator = (compent, item) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            item: item,
            onCallBack:()=>{
                console.log('1');
            }
        })
    }

    onPressSort = () => { // 点击排序
        let { sort } = this.state;
        if ( sort == false ) {
            this.updateState({
                ready: false,
                sort: true,
                filter: false,
            })
        } else {
            this.updateState({
                ready: true,
                sort: false,
                filter: false,
            })
        }
    }

    onPressFilter = () => { // 点击筛选
        let { filter, trueFundType, trueRiskType, trueRateStart, trueRateEnd } = this.state;
        if ( filter == false ) {
            this.updateState({
                ready: false,
                sort: false,
                filter: true,
            })
        } else {
            this.updateState({
                ready: true,
                sort: false,
                filter: false,
            })
        }
    }

    onPressReset = () => { // 点击重置
        this.updateState({
            FundType: 0,
            RiskType: 0,
            rateStart: '',
            rateEnd: '',
        }, () => this.loadNetData())
    }

    onPressFinishFilter = () => { // 点击完成
        let { FundType, RiskType, rateStart, rateEnd } = this.state;
        this.updateState({
            trueFundType: FundType,
            trueRiskType: RiskType,
            trueRateStart: rateStart,
            trueRateEnd: rateEnd,
            ready: true,
            sort: false,
            filter: false,
        }, () => this.loadNetData())
    }

    render(){
        const { ready, error, refreshing, companyListData, sort, filter, sortType, FundType, RiskType } = this.state;
        return (
            <View style={styles.container}>

                <NavigationBar
                    title = {'转让'}
                    style = {styles.navigationBar}
                    titleStyle = {{color: '#333333'}}
                />

                <View style={styles.head}>
                    <TouchableOpacity style={styles.headNav} onPress={() => this.onPressSort()}>
                        <Image source={require('../../assets/images/icons/icon_paixu.png')} style={styles.headImg} />
                        <Text style={styles.headText}>排序</Text>
                    </TouchableOpacity>
                    <View style={{height: 50,width: 1,backgroundColor: '#f2f2f2'}}/>
                    <TouchableOpacity style={styles.headNav} onPress={() => this.onPressFilter()}>
                        <Image source={require('../../assets/images/icons/icon_paixu.png')} style={styles.headImg} />
                        <Text style={styles.headText}>筛选</Text>
                    </TouchableOpacity>
                </View> 

                <View style={{flex: 1, backgroundColor: '#fff',}}>

                    {
                        sort == true &&
                        <View style={styles.sort}>
                            <TouchableOpacity style={styles.sortLine} onPress={() => this.setState({sortType: 1}, () => this.freshNetData())}>
                                <Text style={[styles.sortText, sortType == 1 && styles.thisSortText]}>收益基准最高</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.sortLine} onPress={() => this.setState({sortType: 2}, () => this.freshNetData())}>
                                <Text style={[styles.sortText, sortType == 2 && styles.thisSortText]}>最新上线</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.sortLine} onPress={() => this.setState({sortType: 3}, () => this.freshNetData())}>
                                <Text style={[styles.sortText, sortType == 3 && styles.thisSortText]}>打款时间最短</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.sortLine} onPress={() => this.setState({sortType: 4}, () => this.freshNetData())}>
                                <Text style={[styles.sortText, sortType == 4 && styles.thisSortText]}>认购人数最多</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.sortLine} onPress={() => this.setState({sortType: 5}, () => this.freshNetData())}>
                                <Text style={[styles.sortText, sortType == 5 && styles.thisSortText]}>剩余时间最多</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.sortLine} onPress={() => this.setState({sortType: 6}, () => this.freshNetData())}>
                                <Text style={[styles.sortText, sortType == 6 && styles.thisSortText]}>产品期限最短</Text>
                            </TouchableOpacity>
                        </View>
                    }

                    {
                        filter == true &&
                        <View style={styles.filter}>
                            <ScrollView style={{flex: 1}}>
                                <View style={styles.filterBox}>
                                    <View style={styles.filterTitleBox}>
                                        <Text style={styles.filterTitle}>基金类型</Text>
                                    </View>
                                    <TouchableOpacity style={[styles.filterTag, FundType == 0 && styles.thisFilterTag]} onPress={() => this.updateState({FundType: 0})}>
                                        <Text style={[styles.filterTagText, FundType == 0 && styles.thisFilterTagText]}>不限</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, FundType == 1 && styles.thisFilterTag]} onPress={() => this.updateState({FundType: 1})}>
                                        <Text style={[styles.filterTagText, FundType == 1 && styles.thisFilterTagText]}>股权型</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, FundType == 2 && styles.thisFilterTag]} onPress={() => this.updateState({FundType: 2})}>
                                        <Text style={[styles.filterTagText, FundType == 2 && styles.thisFilterTagText]}>债券型</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, FundType == 3 && styles.thisFilterTag]} onPress={() => this.updateState({FundType: 3})}>
                                        <Text style={[styles.filterTagText, FundType == 3 && styles.thisFilterTagText]}>股票型</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, FundType == 4 && styles.thisFilterTag]} onPress={() => this.updateState({FundType: 4})}>
                                        <Text style={[styles.filterTagText, FundType == 4 && styles.thisFilterTagText]}>货币型</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, FundType == 5 && styles.thisFilterTag]} onPress={() => this.updateState({FundType: 5})}>
                                        <Text style={[styles.filterTagText, FundType == 5 && styles.thisFilterTagText]}>理财型</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, FundType == 6 && styles.thisFilterTag]} onPress={() => this.updateState({FundType: 6})}>
                                        <Text style={[styles.filterTagText, FundType == 6 && styles.thisFilterTagText]}>定开理财型</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, FundType == 7 && styles.thisFilterTag]} onPress={() => this.updateState({FundType: 7})}>
                                        <Text style={[styles.filterTagText, FundType == 7 && styles.thisFilterTagText]}>混合型</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, FundType == 8 && styles.thisFilterTag]} onPress={() => this.updateState({FundType: 8})}>
                                        <Text style={[styles.filterTagText, FundType == 8 && styles.thisFilterTagText]}>指数型</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={styles.filterBox}>
                                    <View style={styles.filterTitleBox}>
                                        <Text style={styles.filterTitle}>风险等级</Text>
                                    </View>
                                    <TouchableOpacity style={[styles.filterTag, RiskType == 0 && styles.thisFilterTag]} onPress={() => this.updateState({RiskType: 0})}>
                                        <Text style={[styles.filterTagText, RiskType == 0 && styles.thisFilterTagText]}>不限</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, RiskType == 1 && styles.thisFilterTag]} onPress={() => this.updateState({RiskType: 1})}>
                                        <Text style={[styles.filterTagText, RiskType == 1 && styles.thisFilterTagText]}>高</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, RiskType == 2 && styles.thisFilterTag]} onPress={() => this.updateState({RiskType: 2})}>
                                        <Text style={[styles.filterTagText, RiskType == 2 && styles.thisFilterTagText]}>中高</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, RiskType == 3 && styles.thisFilterTag]} onPress={() => this.updateState({RiskType: 3})}>
                                        <Text style={[styles.filterTagText, RiskType == 3 && styles.thisFilterTagText]}>中</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, RiskType == 4 && styles.thisFilterTag]} onPress={() => this.updateState({RiskType: 4})}>
                                        <Text style={[styles.filterTagText, RiskType == 4 && styles.thisFilterTagText]}>中低</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[styles.filterTag, RiskType == 5 && styles.thisFilterTag]} onPress={() => this.updateState({RiskType: 5})}>
                                        <Text style={[styles.filterTagText, RiskType == 5 && styles.thisFilterTagText]}>低</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={styles.filterBox}>
                                    <View style={styles.filterTitleBox}>
                                        <Text style={styles.filterTitle}>收益基准</Text>
                                    </View>
                                    <View style={styles.filterInputBox}>
                                        <TextInput
                                            placeholder={''}
                                            style={styles.textInput}
                                            keyboardType="numeric"
                                            onChangeText={(text) => {this.setState({rateStart: text})}}
                                            underlineColorAndroid={'transparent'}
                                        />
                                        <Text style={styles.filterInputText}> - </Text>
                                        <TextInput
                                            placeholder={''}
                                            style={styles.filterInput}
                                            keyboardType="numeric"
                                            onChangeText={(text) => {this.setState({rateEnd: text})}} 
                                            underlineColorAndroid={'transparent'}
                                        />
                                        <Text style={styles.filterInputText}> % </Text>
                                    </View>
                                </View>

                                <View style={styles.filterBtnBox}>
                                    <TouchableOpacity 
                                        style={[styles.filterBtn, styles.filterBtn1]}
                                        onPress={() => this.onPressReset()}
                                    >
                                        <Text style={[styles.filterBtnText1]}>重置</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity 
                                        style={[styles.filterBtn, styles.filterBtn2]}
                                        onPress={() => this.onPressFinishFilter()}
                                    >
                                        <Text style={[styles.filterBtnText2]}>完成</Text>
                                    </TouchableOpacity>
                                </View>
                            </ScrollView>
                        </View>
                    }

                    {ready &&
                        <FlatList
                            style = {styles.shopListView}
                            keyExtractor = { item => item.id}
                            data = {companyListData}
                            extraData = {this.state}
                            renderItem = {(item) => this.renderCompanyItem(item)}
                            onEndReachedThreshold = {0.1}
                            onEndReached = {(info) => this.dropLoadMore(info)}
                            onRefresh = {this.freshNetData}
                            refreshing = {refreshing}
                            ItemSeparatorComponent={this.renderSeparator}
                            ListHeaderComponent = {this.renderHeaderView}
                            ListFooterComponent = {this.renderFooterView}
                            ListEmptyComponent = {this.renderEmptyView}
                        />
                        // : <ActivityIndicatorItem /> // 这个不知道是什么，会持续loading
                    }    
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    // 整体
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
    navigationBar: {
        backgroundColor: '#fff',
        borderBottomColor: GlobalStyles.bgColor,
        borderBottomWidth: 1,
    },

    // 顶部的nav
    head: {
        flexDirection: 'row',
        height: 50,
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2',
    },
    headNav: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    headImg: {
        width: 25,
        height: 25,
        marginRight: 10,
    },
    headText: {
        fontSize: 15,
        color: '#666',
    },

    // 列表内的样式
    item: {
        borderBottomWidth: 10,
        borderBottomColor: '#f2f2f2',
        backgroundColor: '#fff',
        paddingHorizontal: 15,
        paddingVertical: 10,
        alignItems: 'flex-end',
    },
    itemTitle: {
        width: GlobalStyles.width - 30,
        color: '#333',
        fontSize: 14,
        fontWeight: '600',
        marginBottom: 8,
    },
    itemLine: {
        width: GlobalStyles.width - 30,
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 8,
    },
    itemLineLeft: {
        color: '#666',
        fontSize: 13,
    },
    itemLineRight: {
        color: '#333',
        fontSize: 13,
    },
    itemBtn: {
        width: 120,
        height: 30,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#B88950',
        borderRadius: 5,
        paddingHorizontal: 0,
    },
    itemBtnText: {
        color: '#fff',
        fontSize: 12,
    },


    // sort
    sort: {
        flex: 1,
        zIndex: 1,
        backgroundColor: '#fff',
    },
    sortLine: {
        height: 50,
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2',
        paddingHorizontal: 15,
        justifyContent: 'center',
    },
    sortText: {
        fontSize: 13,
        color: '#333',
    },
    thisSortText: {
        color: '#B88950',
    },
    // filter
    filter: {
        flex: 1,
        zIndex: 1,
        backgroundColor: '#fff',
    },
    filterBox: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        paddingLeft: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2',
    },
    filterTitleBox: {
        width: GlobalStyles.width - 15,
        height: 50,
        justifyContent: 'center',
    },
    filterTitle: {
        fontSize: 13,
        color: '#333',
    },
    filterTag: {
        width: GlobalStyles.width / 3 - 20,
        height: 30,
        marginRight: 15,
        marginBottom: 10,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#f2f2f2',
    },
    filterTagText: {
        fontSize: 12,
        color: '#666',
    },
    thisFilterTag: {
        borderWidth: 0,
        backgroundColor: '#B88950',
    },
    thisFilterTagText: {
        color: '#fff',
    },
    filterInputBox: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    filterInput: {
        width: 90,
        height: 30,
        paddingHorizontal: 10,
        paddingVertical: 0,
        borderWidth: 1,
        borderColor: '#f2f2f2',
        borderRadius: 3,
    },
    filterInputText: {
        color: '#B88950',
        fontSize: 15,
    },
    filterBtnBox: {
        position: 'absolute',
        bottom: 0,
        width: GlobalStyles.width,
        height: 50,
        backgroundColor: '#fff',
        paddingVertical: 10,
        paddingHorizontal: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    filterBtn: {
        height: 30,
        width: GlobalStyles.width / 2 - 20,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
    },
    filterBtn1: {
        borderWidth: 1,
        borderColor: '#B88950',
        backgroundColor: '#fff',
    },
    filterBtn2: {
        backgroundColor: '#B88950',
    },
    filterBtnText1: {
        color: '#B88950',
        fontSize: 15,
    },
    filterBtnText2: {
        color: '#fff',
        fontSize: 15,
    },
    textInput: {
        paddingVertical: 0,
    },
});




            







